import { Card, Table, Image, Switch, Button, Space, Pagination } from 'antd';
import { useEffect, useState } from 'react';
import { getProApi } from '@/api/pro';

const columns = [
  {
    title: '产品名称',
    dataIndex: 'proname',
    width: 200,
  },
  {
    title: '产品图片',
    dataIndex: 'img1',
    render(text: string) {
      return <Image src={text} width={100}></Image>;
    },
  },
  {
    title: '产品分类',
    dataIndex: 'category',
  },
  {
    title: '产品品牌',
    dataIndex: 'brand',
    width: 100,
  },
  {
    title: '产品价格',
    dataIndex: 'originprice',
  },
  {
    title: '产品折扣',
    dataIndex: 'discount',
  },
  {
    title: '产品库存',
    dataIndex: 'stock',
  },
  {
    title: '是否售卖',
    dataIndex: 'issale',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '是否推荐',
    dataIndex: 'isrecommend',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '是否秒杀',
    dataIndex: 'isseckill',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '操作',
    width: 170,
    render() {
      return (
        <Space>
          <Button>编辑</Button>
          <Button danger>删除</Button>
        </Space>
      );
    },
  },
];

const Index = () => {
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(1);

  const [count, setCount] = useState<number>(1);
  const [limitNum, setLimitNum] = useState<number>(10);

  useEffect(() => {
    getData();
  }, [count, limitNum]);

  const getData = async () => {
    const res: any = await getProApi({ count: count, limitNum: limitNum });

    setDataSource(res.data);
    setTotal(res.total);
  };

  const handleChange = (page: number, pageSize: number) => {
    // console.log('page', page);
    // console.log('pageSize', pageSize);
    setCount(page);
    setLimitNum(pageSize);
  };

  return (
    <Card>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey="proid"
        pagination={false}
      />
      <Pagination
        defaultCurrent={1}
        total={total}
        style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}
        onChange={handleChange}
      />
    </Card>
  );
};

export default Index;
